<template>
  <div style="width: 100%; height: 500px; display: flex; justify-content: space-between">
    <div style="width: 40%">
      <div style="font-size: 14px; font-weight: 600; text-align: center">水平投影仪</div>
      <div style="display: flex; align-items: center">
        <div style="height: 10px; width: 15px; background: blue; margin-right: 5px"></div>
        <div>实钻轨迹</div>
        <div
          style="height: 10px; width: 15px; background: green; margin-right: 5px; margin-left: 10px"
        ></div>
        <div>设计轨迹</div>
      </div>
      <div id="main"></div>
    </div>
    <div style="width: 40%">
      <div style="font-size: 14px; font-weight: 600; text-align: center">垂直投影仪</div>
      <div style="display: flex; align-items: center">
        <div style="height: 10px; width: 15px; background: blue; margin-right: 5px"></div>
        <div>实钻轨迹</div>
        <div
          style="height: 10px; width: 15px; background: green; margin-right: 5px; margin-left: 10px"
        ></div>
        <div>设计轨迹</div>
      </div>
      <div id="main2"></div>
    </div>
  </div>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="实钻数据" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="deep" label="井深" />
          <el-table-column prop="wellAngel" label="井斜角" />
          <el-table-column prop="azimuthAngle" label="方位角" />
          <el-table-column prop="abscissa" label="横坐标" />
          <el-table-column prop="yCoordinate" label="纵坐标" />
          <el-table-column prop="HeavyDeep" label="重深" />
          <el-table-column prop="addabscissa" label="横坐标增量" />
          <el-table-column prop="addYCoordinate" label="纵坐标增量" />
          <el-table-column prop="VisualTranslation" label="视平移" />
          <el-table-column prop="closureAzimuth" label="闭合方位" />
          <el-table-column prop="ClosureDistance" label="闭合距" />
          <el-table-column prop="dataPrecision" label="数据精度" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="设计数据" name="second">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="deep" label="井深" />
          <el-table-column prop="wellAngel" label="井斜角" />
          <el-table-column prop="azimuthAngle" label="方位角" />
          <el-table-column prop="abscissa" label="横坐标" />
          <el-table-column prop="yCoordinate" label="纵坐标" />
          <el-table-column prop="HeavyDeep" label="重深" />
          <el-table-column prop="addabscissa" label="横坐标增量" />
          <el-table-column prop="addYCoordinate" label="纵坐标增量" />
          <el-table-column prop="VisualTranslation" label="视平移" />
          <el-table-column prop="closureAzimuth" label="闭合方位" />
          <el-table-column prop="ClosureDistance" label="闭合距" />
          <el-table-column prop="dataPrecision" label="数据精度" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
​
<script lang='ts' setup>
import * as echarts from 'echarts'
import 'echarts-gl'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name
  if (activeName.value === 'first') {
    console.log('1')
    color.value = 'blue'
    getList()
  } else {
    console.log('2')
    color.value = 'green'
    getList()
  }
}
const tableData = ref([
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 71.23,
    wellAngel: 0.4,
    azimuthAngle: 140.13,
    abscissa: 0.13,
    yCoordinate: -0.21,
    HeavyDeep: 71.23,
    addabscissa: 0.13,
    addYCoordinate: 0.21,
    VisualTranslation: 0.21,
    closureAzimuth: 148.24,
    ClosureDistance: 0.25,
    dataPrecision: 0.17
  },
  {
    deep: 0.26,
    wellAngel: 0.1,
    azimuthAngle: 300.68,
    abscissa: 0.08,
    yCoordinate: -0.28,
    HeavyDeep: 0.26,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  }
])
const color = ref('blue')
const getList = () => {
  console.log(color.value)
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    xAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    yAxis: {
      axisLine: {
        show: false
      },
      // inverse: true,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    series: [
      {
        data: [
          [-900, 110],
          [-850, -10],
          [-800, -5],
          [-700, -25],
          [-600, -20],
          [-500, -15],
          [-400, -15],
          [-300, -10],
          [-200, -5],
          [-100, -1],
          [0, 0]
        ],
        type: 'line',
        smooth: 'true',
        lineStyle: {
          color: color.value,
          width: 2,
          type: 'solid'
        },
        markPoint: {
          data: [
            {
              name: '开始点',
              coord: [0, 0],
              symbol: 'rect', // 标记形状为矩形
              symbolSize: [10, 10], // 矩形大小
              label: {
                show: false // 不显示标签
              },
              itemStyle: {
                color: 'red' // 背景方块颜色
              }
            }
          ]
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)

  var chartDom2 = document.getElementById('main2')
  var myChart2 = echarts.init(chartDom2)
  var option2
  option2 = {
    xAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    yAxis: {
      axisLine: {
        show: false
      },
      inverse: true,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    series: [
      {
        data: [
          [0, 0],
          [0, 450],
          [100, 900],
          [200, 1200],
          [300, 1800],
          [400, 2200],
          [500, 2800],
          [600, 3100],
          [700, 3500],
          [800, 3900],
          [900, 4200]
        ],
        type: 'line',
        smooth: 'true',
        lineStyle: {
          color: color.value,
          width: 2,
          type: 'solid'
        },
        markPoint: {
          data: [
            {
              name: '开始点',
              coord: [0, 0],
              symbol: 'rect', // 标记形状为矩形
              symbolSize: [10, 10], // 矩形大小
              label: {
                show: false // 不显示标签
              },
              itemStyle: {
                color: 'red' // 背景方块颜色
              }
            }
          ]
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  option2 && myChart2.setOption(option2)
}
onMounted(() => {
  getList()
})
</script>
​<style lang='scss'>
#main {
  height: 400px;
  width: 100%;
}
#main2 {
  height: 400px;
  width: 100%;
}
</style>